<template>
  <page :better-scroll="betterScroll">
    <cart-header
      slot="top"
      :headerRight="headerRight"
      :cartInfo="cartInfo"
      @change-model="changeModel"></cart-header>
    <cart-checkout
      slot="bottom"
      :cartInfo="cartInfo"
      @checkout="checkoutHandler"
      @delete-goods="deleteGoods"
      @select-all="selectAll"
      v-if="checkoutVisible"></cart-checkout>
    <cart-default v-if="defaultVisible"></cart-default>
    <cart-main
      v-if="mianVisible"
      :list="cartGroup"
      @goods-number="goodsNumber"
      @select="select"
      @select-group="selectGroup"></cart-main>
  </page>
</template>

<script type="text/ecmascript-6">
  import cartHeader from './cart-header'
  import cartCheckout from './cart-checkout'
  import cartDefault from './cart-default'
  import cartMain from './cart-main'
  import session from "../../libs/session";
  import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'

  export default {
    // mounted(){
    //   this.getPath()
    // },
    data(){
      return {
        isLogin:false,
      }
    },
    computed: {
      // ...mapState('user', ['isLogin']),
      ...mapState('cart', ['cart']),
      ...mapGetters('cart', ['cartGroup', 'cartInfo']),
      betterScroll () {
        return this.isLogin && this.cartGroup.length > 0
      },
      headerRight () {
        return this.isLogin && this.cartGroup.length > 0
      },
      defaultVisible () {
        return !this.isLogin || this.cartGroup.length === 0
      },
      mianVisible () {
        return this.isLogin
      },
      checkoutVisible () {
        return this.isLogin && this.cartGroup.length > 0
      },
      getPath(){
        if (this.$route.path == 'cart') {
          this.doRequest.get('/cart_info').then(ret=>{
            // console.log(cartInfo);
            let cartInfo = ret.data;
            this.INIT_CART_INFO(cartInfo)
          })
        }
      }
    },
    components: {
      cartHeader,
      cartCheckout,
      cartDefault,
      cartMain
    },
    created() {
      this.getCartInfo();
      if(session.isLogin()){
        this.isLogin = true;
      }
    },
    methods: {
      ...mapMutations('cart', ['INIT_CART_INFO','TOGGLE_MODEL', 'SELECT_GOODS', 'SELECT_GROUP', 'SELECT_ALL']),
      ...mapActions('cart', ['updateUserCartGoods', 'deleteUserCartGoods', 'checkout']),
      changeModel () {
        this.TOGGLE_MODEL()
      },
      checkoutHandler (a) {
        if (a.length) {
          console.log(a);
          let ids = '';
          for (let i=0;i<a.length;i++){
            if(!ids){
              ids = a[i].goodsId;
            }else{
              ids += ','+a[i].goodsId;
            }
          }
          this.$go("/checkout?is_cart=1&sku_ids="+ids)
        } else {
          this.$toast('商品数量不能少于一件', 'warn')
        }
      },
      deleteGoods (o) {
        this.deleteUserCartGoods(o)
      },
      goodsNumber (o) {
        if (o.type === 'sub' && o.number === 1) {
          this.$toast('商品数量不能少于一件', 'warn')
          return
        }
        this.updateUserCartGoods(o)
      },
      select (o) {
        this.SELECT_GOODS(o)
      },
      selectGroup (o) {
        this.SELECT_GROUP(o)
      },
      selectAll () {
        this.SELECT_ALL()
      },
      getCartInfo(){
        this.doRequest.get('/cart_info').then(ret=>{
          // console.log(cartInfo);
          let cartInfo = ret.data;
          this.INIT_CART_INFO(cartInfo)
        })
      }
    },
    watch:{
      '$route': function (newVal, oldVal) {
        this.getCartInfo();
      }
    }
  }
</script>
